<template>
    <table>
        <thead>
            <tr class="text-center">
                <th>车名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id" class="text-center">
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <button @click="edit(item.id)">编辑</button>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
import { ref, reactive, onBeforeMount, onActivated, onDeactivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const list = reactive(
    [
        {
            id: 1,
            name: "奥迪 Q7",
            price: 650000
        },
        {
            id: 2,
            name: "宝马 X6",
            price: 700000
        },
        {
            id: 3,
            name: "奔驰 S350",
            price: 1200000
        }
    ]
)
const edit = id => {
    const item = list.find(item => item.id == id)
    // router.push({path:'/home',query:{id:item.id,name:item.name,price:item.price}})
    router.push({ path: '/home', query: { ...item } })
}
const route = useRoute()

onBeforeMount(() => {
    // list.forEach(item => {
    //     if (item.id == route.query.id) {
    //         item.name = route.query.name
    //         item.price = Number(route.query.price)
    //     }
    // })
})

onActivated(() => {
    console.log('table');
    if (route.query.id) {
        const item = list.find(item => item.id == route.query.id)
        item.name = route.query.name
        item.price = Number(route.query.price)
    }
})
onDeactivated(() => {
    console.log('table');
})
</script>

<style lang="scss" scoped></style>